<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
                  xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">



	<ui:composition template="../../template/template.xhtml">
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<ui:define name="corpo">
		
			<rich:panel header="Filtro">
			
				<h:panelGrid columns="4" width="100%" styleClass="tabelaSemBorda" >
				<h:outputText value="Nome do Livro:"/>
				<h:outputText value="Curso: "/>
				<h:outputText value="Ano: "/>
				<h:outputText value="Editora: "/>
				<h:inputText  />
				<rich:comboBox />
				<h:inputText  />
				<h:inputText  />
				
				
				</h:panelGrid>
				<br></br>
				<a4j:commandButton value="Pesquisar" />
				
			</rich:panel>
		
			<rich:panel header="Livros">
				
				
					<rich:dataGrid var="livro" value="#{indexBean.destaques}" columns="4" width="100%" styleClass="tabelaSemBorda" >
					
						<rich:panel  id="panel" style="align:center; width:150px">
							<div align="center">
							<h:graphicImage url="#{livro.imageName}" width="120px" height="160" >
								
							</h:graphicImage>
							<br></br>
							<h:outputText value="#{livro.nome}" />
							<br></br>
							<h:outputText value="#{livro.autor}" />
							</div>
						</rich:panel>
						
						 <br style="clear:both" />
						
						<rich:jQuery selector="#panel img" query="addClass('pic-normal')"/>
					    <rich:jQuery 			selector="#panel img" query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />
					    <rich:jQuery selector="#panel img" query="mouseover(function(){enlargePic(this)})"/>
					    <rich:jQuery selector="#panel img" query="mouseout(function(){normalPic(this)})"/>
					    
					    <rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'150px',height:'215px',border:'1px solid #87CEFA'})" />
					    <rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'120px', height: '160px'})" />
						
					
					</rich:dataGrid>
				
			
			</rich:panel>
			
		</ui:define>

	</ui:composition>

</html>